 body::before {
   display: block;
   content: '';
   height: 56px;
 }

 body {

   background-color: #eeeeee;
   background-image: radial-gradient(circle, #8fa1bd, #adb6cd, #cacddc, #e4e4ec, #fdfdfd);
   transition: .6s;
 }

 .monster {
   z-index: -1;
   width: 100px;
   height: 150px;
   background: url(../images/monster.png) no-repeat center/cover;
   position: absolute;
   top: 0;
   left: 35%;
   opacity: 0;
 }

 @keyframes come-in {
   0% {
     transform: translateY(-200px);
   }

   100% {
     transform: translateY(0);
   }
 }

 @keyframes come-out {
   0% {
     transform: translateY(0px);
   }

   100% {
     transform: translateY(-200px);
   }
 }

 ul {
   list-style-type: none;
 }


 .navbar-brand {
   font-size: 30px;
   border: none;
   display: flex;
   align-items: center;
 }

 .nav-link a {
   font-size: 20px;
   display: block;
   padding: 5px 8px;
 }


 .nav-link a:focus {
   background-color: rgb(99, 61, 101);
   color: #fff !important;
   border-radius: 4px;
 }

 .nav-link a:hover {
   color: #ffffff !important;
 }

 .navbar a {
   text-decoration: none !important;
   color: #666 !important;
 }

 .nav-item {
   position: relative;
 }

 /* 白天黑夜切换按钮 */
 .switch {
   position: relative;
   display: inline-block;
   width: 50px;
   height: 25px;
 }

 .dark {
   padding-top: 16px;
 }

 .switch input {
   display: none;
 }

 .slide {
   position: absolute;
   cursor: pointer;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: #ccc;
   border-radius: 34px;
   transition: .4s;
 }

 .slide-item {
   position: absolute;
   width: 18px;
   height: 18px;
   left: 4px;
   bottom: 4px;
   background: #fff;
   border-radius: 50%;
   transition: .4s;
 }

 .slideBack {
   background: #b892ff;
 }


 .dark-mode {
   background: #0b0a14;
   color: #fff;

 }

 .slide-items {
   transform: translateX(26px);
 }

 /* 白天黑夜切换按钮end */
 .navbar-toggler {
   background-color: #707070 !important;
 }

 .group-members {
   color: #666;
   font-size: 20px;
   cursor: pointer;
 }

 /* 下拉列表 */
 .dropdowm-list {
   padding: 0 85px;
   width: 220px;
   height: 210px;
   border: 1px solid #ccc;
   border-radius: 15px;
   position: absolute;
   top: 60px;
   right: 50%;
   transform: translateX(50%);
   transition: 0.4s linear;
   opacity: 0;
   background-color: rgba(255, 255, 255, .4);
 }

 .dropdowm-list li {
   color: #151d2d !important;
   height: 33px;
   line-height: 33px;
   transition: 0.3s ease-in-out;
 }

 .dropdowm-list.active {
   opacity: 1;
 }


 .members {
   display: none;
   color: #fff !important;
 }

 .group-members:hover,
 .group-members:focus {
   color: #000000;
 }

 .vi-bg {
   padding: 0 ! important;
   margin: 0 ! important;
 }

 .explaim {
   text-align: center;
 }

 video {
   width: 100%;
   height: 100%;
   overflow: hidden;
   border: 40px solid #333950;
   border-radius: 10px !important;
   background: url(../images/背景图.jpg);
 }


 .vi-bg {
   background-position: 50% 50%;
 }


 .video_box .left img,
 .right img {
   width: 100%;
 }

 @media screen and (max-width:991px) {

   .video_box .left img,
   .right img {
     width: 0%;
   }
 }

 .video_box .left {
   display: flex;
   flex-direction: column;
   justify-content: space-around;
   animation: move 0.8s ease-in;
 }

 .video_box .left .go {
   animation: move1 0.8s ease-in, go 1s ease-in-out 2.5s infinite alternate;
 }

 .video_box .right {
   display: flex;
   flex-direction: column;
   justify-content: space-around;
   animation: run 0.5s ease-in;
 }

 .video_box .right .to {
   animation: run1 0.8s ease-in;
 }

 .video_box {
   padding-top: 50px;
 }

 @keyframes move {
   0% {
     transform: translateX(-120px);
   }

   100% {
     transform: translateX(0);

   }
 }

 @keyframes move1 {
   0% {
     transform: translateY(-30px);
   }

   100% {
     transform: translateX(0);

   }
 }

 .three {
   animation: move2 0.8s ease-in;
 }

 @keyframes move2 {
   0% {
     transform: translateY(30px);
   }

   100% {
     transform: translateX(0);

   }
 }

 @keyframes run {
   0% {
     transform: translateX(120px);
   }

   100% {
     transform: translateX(0);

   }
 }

 @keyframes run1 {
   0% {
     transform: translateY(-30px);
   }

   100% {
     transform: translateX(0);

   }
 }

 @keyframes go {
   0% {
     transform: translateY(-20px);
   }

   100% {
     transform: translateY(20px);

   }
 }